<dstore-center-title>
  <span title i18n>Remote App</span>
  <button routerLink="../local" routerLinkActive="active">
    <ng-container i18n>Local App</ng-container>
  </button>
  <button routerLink="../remote" routerLinkActive="active">
    <ng-container i18n>Remote App</ng-container>
  </button>
</dstore-center-title>
<dstore-remote-install></dstore-remote-install>
<div class="remote-apps" *ngIf="installing$ | async as installing">
  <dstore-scrollbar>
    <ng-container *ngIf="apps$ | async as apps; else loading">
      <div class="remote-app" *ngFor="let remoteApp of apps">
        <img
          class="icon"
          dstoreCover="icon"
          [src]="remoteApp.app.info.icon"
          [routerLink]="['/app', remoteApp.app.name]"
        />
        <div class="content">
          <div class="info">{{ remoteApp.app.info.name }}</div>
          <div class="time">
            <span i18n>Date installed:</span>
            {{ remoteApp.time | date: 'yyyy.MM.dd' }}
          </div>
          <ng-container *ngIf="remoteApp.app.package; else noVersionError">
            <div class="version"><span i18n>Version:</span> {{ remoteApp.version }}</div>
            <div class="control">
              <ng-container *ngIf="installing.includes(remoteApp.app.name); else update"
                ><button i18n disabled>Installing</button></ng-container
              >
              <ng-template #update>
                <button *ngIf="remoteApp.app.package.upgradable; else installedRef">
                  <ng-container i18n>Update</ng-container>
                </button>
              </ng-template>
              <ng-template #installedRef>
                <button
                  disabled
                  *ngIf="remoteApp.app.package.localVersion != '' || installed.has(remoteApp.app.name); else install"
                >
                  <ng-container i18n>Installed</ng-container>
                </button>
              </ng-template>
              <ng-template #install>
                <button (click)="installApp(remoteApp.app)" i18n>Install</button>
              </ng-template>
            </div>
          </ng-container>
          <ng-template #noVersionError>
            <div class="no-version" i18n>The application is not available, please retry or give feedback</div>
          </ng-template>
        </div>
      </div>
    </ng-container>
  </dstore-scrollbar>
</div>
<div class="paginatorContainer">
  <ng-container *ngIf="count$ | async as count">
    <app-paginator
      [count]="count"
      [pageIndex]="pageIndex$ | async"
      (pageIndexChange)="gotoPage($event)"
    ></app-paginator>
  </ng-container>
</div>
<ng-template #loading>
  <div class="loadingContainer"><app-wait></app-wait></div>
</ng-template>
